<!DOCTYPE html>
<html style="background-color: #f2f2f2;" lang="en">
<%include("/common/header.html",{title:''}){}%>
<style type="text/css">
  #c{
    margin: 0 auto;
    display: block;
  }
  #r{
    display: block;
    margin: 0 auto;
  }
  #r::before{
    color: black;
    content: attr(min);
    padding-right: 10px;
  }
  #r::after{
    color: black;
    content: attr(max);
    padding-left: 10px;
  }
</style>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-sm12">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">环境健康指数
              <button type="button" class="layui-btn" style="float: right;">一键体检</button></div>

            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td>
                    <canvas id="c" style="height: 300px;"></canvas>
                    <input style="display: none" type="range" id="r" min="0" max="100" step="1">
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">问题解决</div>
            <div class="layui-card-body">
              <table class="layui-table layuiadmin-page-table" lay-skin="line">
                <thead>
                <tr>
                  <th>问题描述</th>
                  <th>解决方法</th>
                  <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td><span class="first">氨气超标</span></td>
                  <td><i class="layui-icon ">打开风机通风</i></td>
                  <td><i class="layui-icon layui-icon-time">异常</i></td>
                </tr>
                <tr>
                  <td><span class="second">温度超标</span></td>
                  <td><i class="layui-icon ">打开风机通风</i></td>
                  <td><i class="layui-icon layui-icon-time">异常</i></td>
                </tr>
                <tr>
                  <td><span class="third">氨气超标</span></td>
                  <td><i class="layui-icon ">启动喷药系统</i></td>
                  <td><i class="layui-icon layui-icon-time">异常</i></td>
                </tr>
                <tr>
                  <td>氨气超标</td>
                  <td><i class="layui-icon ">打开风机通风</i></td>
                  <td><i class="layui-icon layui-icon-time">异常</i></td>
                </tr>
                <tr>
                  <td>氨气超标</td>
                  <td><i class="layui-icon ">打开风机通风</i></td>
                  <td><i class="layui-icon layui-icon-time">异常</i></td>
                </tr>
                <tr>
                  <td>氨气超标</td>
                  <td><i class="layui-icon ">打开风机通风</i></td>
                  <td><i class="layui-icon layui-icon-time">异常</i></td>
                </tr>
                <tr>
                  <td>氨气超标</td>
                  <td><i class="layui-icon ">打开风机通风</i></td>
                  <td><i class="layui-icon layui-icon-time">异常</i></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
          <div class="layui-card" style="height: 123px;">
            <div class="layui-card-header">
              <span style="color: #05aaaa;">温度</span>
              <span class="layui-badge layui-bg-blue layuiadmin-badge">摄氏度</span>
            </div>
            <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
              <p class="layuiadmin-big-font" style="padding-bottom: 0px;">
                <i
                      style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                      ><image src="img/temp.png"></image></i><span style="margin-left: 70px;color: #05aaaa;">23</span>
              </p>
              <p>
                <span style="float:right;color: #05aaaa;">℃</span>
              </p>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
          <div class="layui-card" style="height: 123px;">
            <div class="layui-card-header">
              <span style="color: #05aaaa;">湿度</span>
              <span class="layui-badge layui-bg-green layuiadmin-badge">相对湿度</span>
            </div>
            <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
              <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                      style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
                <image src="img/wid.png"></image>
              </i><span style="margin-left: 70px;color: #05aaaa;">50</span>
              </p>
              <p>
                <span style="float:right;color: #05aaaa;">%RH</span>
              </p>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
          <div class="layui-card" style="height: 123px;">
            <div class="layui-card-header">
              <span style="color: #05aaaa;">二氧化碳</span>
              <span class="layui-badge layui-bg-cyan layuiadmin-badge">CO2</span>
            </div>
            <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
              <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                      style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
                <image src="img/coo.png" alt="" style="width: 32px;height: 32px"></image>
              </i><span style="margin-left: 70px;color: #05aaaa;">147</span>
              </p>
              <p>
                <span style="float:right;color: #05aaaa;">PPM</span>
              </p>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
          <div class="layui-card" style="height: 123px;">
            <div class="layui-card-header">
              <span style="color: #05aaaa;">氨气</span>
              <span class="layui-badge layui-bg-orange layuiadmin-badge">NH3</span>
            </div>
            <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
              <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                      style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                      >
                <image src="img/nh3.png"></image>
              </i><span
                      style="margin-left: 70px;color: #05aaaa;">16</span></p>
              <p>
                <span style="float:right;color: #05aaaa;">PPM</span>
              </p>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
          <div class="layui-card" style="height: 123px;">
            <div class="layui-card-header">
              <span style="color: #05aaaa;">光照强度</span>
              <span class="layui-badge layui-bg-orange layuiadmin-badge">勒克斯</span>
            </div>
            <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
              <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                      style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
                <image src="img/sun.png"></image>
              </i><span
                      style="margin-left: 70px;color: #05aaaa;">50000</span></p>
              <p>
                <span style="float:right;color: #05aaaa;">LX</span>
              </p>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
          <div class="layui-card" style="height: 123px;">
            <div class="layui-card-header">
              <span style="color: #05aaaa;">风速</span>
              <span class="layui-badge layui-bg-orange layuiadmin-badge">空气流动速率</span>
            </div>
            <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
              <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                      style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                      >
                <image src="img/speed.png"></image>
              </i><span
                      style="margin-left: 70px;color: #05aaaa;">2.5</span></p>
              <p>
                <span style="float:right;color: #05aaaa;">m/s</span>
              </p>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">最新展示数据</div>
            <div class="layui-col-sm3 layui-col-md3">
              <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                  <span style="color: #05aaaa;">温度</span>
                  <span class="layui-badge layui-bg-green layuiadmin-badge">鸡舍1号</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                  <p class="layuiadmin-big-font" style="padding-bottom: 0px;">
                    <i
                            style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                    ><image src="img/temp.png"></image></i><span style="margin-left: 70px;color: #05aaaa;">23</span>
                  </p>
                  <p>
                    <span style="float:right;color: #05aaaa;">℃</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="layui-col-sm3 layui-col-md3">
              <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                  <span style="color: #05aaaa;">湿度</span>
                  <span class="layui-badge layui-bg-green layuiadmin-badge">鸡舍1号</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                  <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                          style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
                    <image src="img/wid.png"></image>
                  </i><span style="margin-left: 70px;color: #05aaaa;">50</span>
                  </p>
                  <p>
                    <span style="float:right;color: #05aaaa;">%RH</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="layui-col-sm3 layui-col-md3">
              <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                  <span style="color: #05aaaa;">二氧化碳</span>
                  <span class="layui-badge layui-bg-green layuiadmin-badge">鸡舍1号</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                  <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                          style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
                    <image src="img/coo.png" alt="" style="width: 32px;height: 32px"></image>
                  </i><span style="margin-left: 70px;color: #05aaaa;">147</span>
                  </p>
                  <p>
                    <span style="float:right;color: #05aaaa;">PPM</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="layui-col-sm3 layui-col-md3">
              <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                  <span style="color: #05aaaa;">氨气</span>
                  <span class="layui-badge layui-bg-green layuiadmin-badge">鸡舍1号</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                  <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                          style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                  >
                    <image src="img/nh3.png"></image>
                  </i><span
                          style="margin-left: 70px;color: #05aaaa;">16</span></p>
                  <p>
                    <span style="float:right;color: #05aaaa;">PPM</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="layui-col-sm3 layui-col-md3">
              <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                  <span style="color: #05aaaa;">光照强度</span>
                  <span class="layui-badge layui-bg-green layuiadmin-badge">鸡舍1号</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                  <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                          style="font-size: 25px;position: absolute;top: 7px;left: 20px;">
                    <image src="img/sun.png"></image>
                  </i><span
                          style="margin-left: 70px;color: #05aaaa;">500</span></p>
                  <p>
                    <span style="float:right;color: #05aaaa;">LX</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="layui-col-sm3 layui-col-md3">
              <div class="layui-card" style="height: 123px;">
                <div class="layui-card-header">
                  <span style="color: #05aaaa;">风速</span>
                  <span class="layui-badge layui-bg-green layuiadmin-badge">鸡舍1号</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
                  <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i
                          style="font-size: 25px;position: absolute;top: 7px;left: 20px;"
                  >
                    <image src="img/speed.png"></image>
                  </i><span
                          style="margin-left: 70px;color: #05aaaa;">2.5</span></p>
                  <p>
                    <span style="float:right;color: #05aaaa;">m/s</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">基本信息</div>
            <div class="layui-card-body">
              <table class="layui-table layuiadmin-page-table" lay-skin="line">
                <thead>
                <tr>
                  <th>名称</th>
                  <th>状态</th>
                  <th>面积</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td><span class="first">鸡舍1号</span></td>
                  <td><i class="layui-icon ">正常</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-20</i></td>
                </tr>
                <tr>
                  <td><span class="second">鸡舍1号</span></td>
                  <td><i class="layui-icon ">正常</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-15</i></td>
                </tr>
                <tr>
                  <td><span class="third">鸡舍1号</span></td>
                  <td><i class="layui-icon ">正常</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-09</i></td>
                </tr>
                <tr>
                  <td>鸡舍1号</td>
                  <td><i class="layui-icon ">正常</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-13</i></td>
                </tr>
                <tr>
                  <td>鸡舍1号</td>
                  <td><i class="layui-icon ">正常</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-04</i></td>
                </tr>
                <tr>
                  <td>鸡舍1号</td>
                  <td><i class="layui-icon ">正常</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-25</i></td>
                </tr>
                <tr>
                  <td>鸡舍1号</td>
                  <td><i class="layui-icon ">正常</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-19</i></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
       <!-- <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">通知公告</div>
            <div class="layui-card-body">
              <table class="layui-table layuiadmin-page-table" lay-skin="line">
                <thead>
                <tr>
                  <th>发现内容</th>
                  <th>发布人</th>
                  <th>发布时间</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td><span class="first">疫情影响</span></td>
                  <td><i class="layui-icon layui-icon-username">阿良</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-20</i></td>
                </tr>
                <tr>
                  <td><span class="second">疫情影响</span></td>
                  <td><i class="layui-icon layui-icon-username">阿翔</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-15</i></td>
                </tr>
                <tr>
                  <td><span class="third">疫情影响</span></td>
                  <td><i class="layui-icon layui-icon-username">胡总</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-09</i></td>
                </tr>
                <tr>
                  <td>疫情影响</td>
                  <td><i class="layui-icon layui-icon-username">宁总</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-13</i></td>
                </tr>
                <tr>
                  <td>疫情影响</td>
                  <td><i class="layui-icon layui-icon-username">荣荣</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-04</i></td>
                </tr>
                <tr>
                  <td>疫情影响</td>
                  <td><i class="layui-icon layui-icon-username">闯哥</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-25</i></td>
                </tr>
                <tr>
                  <td>疫情影响</td>
                  <td><i class="layui-icon layui-icon-username">周权</i></td>
                  <td><i class="layui-icon layui-icon-time">2020-01-19</i></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div-->
      </div>
    </div>

  </div>
</div>
<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
  var canvas = document.getElementById('c');
  var ctx = canvas.getContext('2d');
  var range = document.getElementById('r');

  //range控件信息
  var rangeValue = range.value;
  var nowRange = 0; //用于做一个临时的range

  //画布属性
  var mW = canvas.width = 250;
  var mH = canvas.height = 250;
  var lineWidth = 2;

  //圆属性
  var r = mH / 2; //圆心
  var cR = r - 16 * lineWidth; //圆半径

  //Sin 曲线属性
  var sX = 0;
  var sY = mH / 2;
  var axisLength = mW; //轴长
  var waveWidth = 0.015 ; //波浪宽度,数越小越宽
  var waveHeight = 6; //波浪高度,数越大越高
  var speed = 0.09; //波浪速度，数越大速度越快
  var xOffset = 0; //波浪x偏移量

  ctx.lineWidth = lineWidth;

  //画圈函数
  var IsdrawCircled = false;
  var drawCircle = function(){

    ctx.beginPath();
    ctx.strokeStyle = '#8eb0c7';
    ctx.arc(r, r, cR+5, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(r, r, cR, 0, 2 * Math.PI);
    ctx.clip();

  }

  //画sin 曲线函数
  var drawSin = function(xOffset){
    ctx.save();

    var points=[]; //用于存放绘制Sin曲线的点

    ctx.beginPath();
    //在整个轴长上取点
    for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
      //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
      var y = -Math.sin((sX + x) * waveWidth + xOffset);

      var dY = mH * (1 - nowRange / 100 );

      points.push([x, dY + y * waveHeight]);
      ctx.lineTo(x, dY + y * waveHeight);
    }

    //封闭路径
    ctx.lineTo(axisLength, mH);
    ctx.lineTo(sX, mH);
    ctx.lineTo(points[0][0],points[0][1]);
    //console.log(nowRange)
    if (nowRange>0&&nowRange<=50){
      ctx.fillStyle = '#d55f63';
    }else if (nowRange>50&&nowRange<=70){
      ctx.fillStyle = '#ddf695';
    }else if (nowRange>70&&nowRange<=100){
      ctx.fillStyle = '#2F9688';
    }
    // ctx.fillStyle = '#1c86d1';
    ctx.fill();

    ctx.restore();
  };

  //写百分比文本函数
  var drawText = function(){
    ctx.save();

    var size = 0.4*cR;
    ctx.font = size + 'px Microsoft Yahei';
    ctx.textAlign = 'center';
    if(nowRange>70){
      ctx.fillStyle = "rgb(255,255,255)";
    }else{
      ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
    }

    ctx.fillText(~~nowRange + '%', r, r + size / 2);
    //console.log(nowRange)
    ctx.restore();
  };

  var render = function(){
    ctx.clearRect(0, 0, mW, mH);

    rangeValue = range.value;

    if(IsdrawCircled == false){
      drawCircle();
    }

    if(nowRange <= rangeValue){
      var tmp = 1;
      nowRange += tmp;
    }

    if(nowRange > rangeValue){
      var tmp = 1;
      nowRange -= tmp;
    }

    drawSin(xOffset);
    drawText();

    xOffset += speed;
    requestAnimationFrame(render);
  }

  render();
</script>
<script>
  //饼图（精细养护）
  var dom = document.getElementById("container");
  var myChart = echarts.init(dom);
  var app = {};
  option = null;
  option = {
    color: ['#60acfc', '#5bc49f', '#ff7c7c', '#9287e7'],
    title: {
      text: '环境健康指数',
      subtext: '分类占比',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['临时照料','临时医疗','家政服务','社区餐饮']
    },
    series: [
      {
        name: '用户年龄占比',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          {value: 10, name: '临时照料'},
          {value: 15, name: '临时医疗'},
          {value: 24, name: '家政服务'},
          {value: 48, name: '社区餐饮'}


        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  if (option && typeof option === "object") {
    myChart.setOption(option, true);
  }
  //////////////////////////////////////////////////////
  //饼图（日常养护）
  var dom = document.getElementById("container1");
  var myChart = echarts.init(dom);
  var app = {};
  option = null;
  option = {
    color: ['#feb64d', '#9287e7', '#5bc49f', '#60acfc', '#32d3eb'],
    title: {
      text: '男女用户占比',
      subtext: '男女占比',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['男', '女']
    },
    series: [
      {
        name: '男女用户占比',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          {value: 885, name: '男'},
          {value: 222, name: '女'}

        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  if (option && typeof option === "object") {

    myChart.setOption(option, true);

  }
  //////////////////////////////////////////////////////
  //柱图（巡查逐月）
  var dom = document.getElementById("container2");
  var myChart = echarts.init(dom);
  var app = {};
  option = null;
  option = {
    title: {
      text: '订单交易逐月统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      orient: 'vertical',
      data: ['成交', '未成交'],
      left: 'right'
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '成交',
        type: 'bar',
        color: '#60ACFC',
        data: [12, 9, 22, 18, 19, 8, 30, 25, 21, 23, 18, 19],
        markPoint: {
          data: [
            {type: 'max', name: '最大值'},
            {type: 'min', name: '最小值'}
          ]
        },
        markLine: {
          data: [
            {type: 'average', name: '平均值'}
          ]
        }
      },
      {
        name: '未成交',
        type: 'bar',
        color: '#AFE39B',
        data: [1, 3, 1, 4, 3, 5, 1, 1, 1, 1, 2, 1],
        markPoint: {
          data: [
            {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
            {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
          ]
        },
        markLine: {
          data: [
            {type: 'average', name: '平均值'}
          ]
        }
      }
    ],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      top: '25%',
      containLabel: true
    }
  };
  if (option && typeof option === "object") {

    myChart.setOption(option, true);
  }

</script>
</body>
</html>